<template>
<view>
	<u-navbar :is-back="false" title="还库单填报"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
	
  <div class="app-draw-add">
    <u-empty text="暂无数据"
      mode="list"
      v-if="!list.length">
    </u-empty>
    <div v-else>
      <div
        class="draw-content">
        <appProduct
          v-for="(v,i) in list"
          :key="i" :li="v">
          <view slot="cell" class="u-flex" v-if="v.checked">
            <span> 归还数量（{{v.Unit}}）：</span>
            <u-input border class="ninput"
              type="text"
              v-model="v.Count"
              :maxlength="v.NeedCount.length">
            </u-input>
          </view>
		  <view slot="cell" class="u-flex"  v-if="v.checked">
		    <span> 归还数量（{{v.PackUnit}}）：</span>
		    <u-input border class="ninput"
		      type="text"
		      v-model="v.PackCount"
		      :maxlength="v.PackNeedCount.length">
		    </u-input>
		  </view>
		  <u-checkbox
		    style="margin-right:-20rpx"
		    :name="list"
		    v-model="v.checked"
		    shape="circle">
		  </u-checkbox>
        </appProduct>
      </div>
      <div class="draw-mark">
        <span>备注（非必填）</span>
        <u-input
          type="textarea"
          v-model="info.Info"
          border></u-input>
      </div>
      <div class="footer">
        <u-button>取消
        </u-button>
        <u-button
          type="primary"
          @click="handleSave">
          提交
        </u-button>
      </div>
    </div>
  </div>
   </view>	
</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      isAllList: true,
      form: {
        UserId: 0,
        Key: '',
        ProClassId: 0
      },
      info: {
        InOut: 1,
        iType: 2,
        CarId: 0,
        CarNo: '',
        Info: ''
      },
      page: 1,
      formdata: [],
      list: []
    }
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getList()
  },
  methods: {
    defaultData(cb) {
      this.page = 1
      this.list = []
      this.isAllList = true
      cb && cb()
    },
    changeSearch() {
      this.defaultData(() => {
        this.getList()
      })
    },
	handleSelect(item, index) {
	  item.checked = !item.checked
	  console.log(item)
	  this.$set(this.clist, index, item)
	},
	
    handleSave() {
		 let clist = this.list.filter(x => x.checked)
		 
      this.$axios('api/ProInAndOut/CarApplyProGet', 'post', { value: this.info }).then(ret => {
        clist.forEach(x => (x.InAndOutId = ret.Value))
        this.$axios('api/ProInAndOutList/AddListDetail', 'post', { value: clist }).then(res => {
			if (!res.Success) {
			  uni.showToast({
			    title: '提交失败：'+res.Message,
			    icon: 'none',
			    duration: 2000
			  })
			  return false
			}
			  this.$api.handleToUrl('提交成功', '/pages/sale/draw/drawRecord?state=1')
       //   this.$api.handleBack('添加成功')
          getApp().globalData.addCusGoodLi = null
        })
      })
    },
    getList() {
      // let userInfo = uni.getStorageSync('user_info')
      // this.form.UserId = userInfo.busbasic.fId
      this.$axios('api/CarProStock/ListPaged', 'post', { value: this.form, PageIndex: this.page }).then(res => {
        if (res.Value.List.length) this.isAllList = false
        this.list = res.Value.List.map(x => ({
          fInOut: 1,
          fType: 2,
          ProId: x.fProId,
          id: x.fId,
          ProName: x.fProName,
          gname: x.fProName,
          avatar: this.$api.OrderImg(x.fProId),
          NeedCount: x.fCount,
          Count: x.fCount,
	      PackCount: x.fPackCount,
		  PackNeedCount: x.fPackCount,
		  Unit: x.fUnit,
		  PackUnit: x.fPackUnit,
		  checked:  true,
          details: [
			  {
			    label: '车上库存(' + x.fUnit +')',
			    value: x.fCount
			  },
            {
              label: '车上库存(' + x.fPackUnit +')',
              value: x.fPackCount
            }
          ]
        }))
      })
    }
  },
  onShow() {
    this.defaultData()
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.app-draw-add {
  padding-bottom: 70rpx;
  .draw-item {
    .title {
      font-size: 30rpx;
      color: #7f7f7f;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }
  }
  .draw-add {
    color: #007aff;
    font-size: 30rpx;
    padding: 32rpx;
    text-align: center;
  }
  .draw-mark {
    display: flex;
    padding: 0 32rpx;
    u-input {
      flex: 1;
    }
  }
  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
}
.ninput{width: 50%;}
</style>